<template>
  <div>
    <p class="titleView" v-if="userName">{{userName.replace('hft_','')}}的证书</p>
    <loading-view ref="loading" :data="certList">
      <div>
        <div class="certView">
          <div class="itemView" v-for="(el, idx) in certList">
            <cert-cell :data="el" @certClick="certClick(el)"></cert-cell>
          </div>
        </div>
      </div>
    </loading-view>
  </div>
</template>

<script>

  import LoadingView from '@/components/LoadingView'
  import CertCell from './components/CertCell'
  import TeamAPI from '@/repo/api/TeamAPI'
  import UserAPI from "../../../../repo/api/UserAPI";

  export default {
    name: "user-cert",
    data () {
      return {
        certList: null,
        userName: '',
      }
    },
    components: {
      CertCell,
      LoadingView
    },
    mounted() {
      this.getCert()
    },
    methods: {
      getCert() {

        UserAPI.getTargetUserInfo(this.$route.params.userId).then(response => {
          this.userName = response.responseData.nickname;
        })

        TeamAPI.getMemberCert(this.$route.params.userId).then((res) => {
          this.certList = res.responseData.list
        }).catch((error) => {
          this.$refs.loading.showError()
        })

      },
      certClick(data){
        let certification = data.receiveInfo;
        if(certification){
          let certId = certification.certificateId;
          let userId = certification.userid
          this.$router.push(`/cert/${certId}/${userId}`)
        }
      },
    }
  }
</script>

<style scoped>
  .certView {
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .certView :nth-child(2n) {
    margin-right: 0px;
  }

  .itemView {
    width: calc((100% - 16px) / 2);
    margin-right: 16px;
    margin-bottom: 16px;
  }

  .titleView{
    margin: 16px 0 16px 16px;
    font-weight: bold;
    color: #1DA1F2;
    word-break: break-all;
  }
</style>
